<template>
  <div class="view-wrapper">
    <!-- app-container -->
    <div class="head">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="" prop="keyword">
          <el-input
            v-model="queryParams.keyword"
            placeholder="客户id/客户名称/联系方式"
            clearable
          />
        </el-form-item>
        <!-- <el-form-item label="行业类型：" prop="industryType">
            <el-select v-model="queryParams.industryType" placeholder="请选择">
              <el-option v-for="item in industryList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item> -->
        <el-form-item label="客户类型：" prop="clientType">
          <el-select v-model="queryParams.clientType" placeholder="请选择">
            <el-option
              v-for="item in clientList"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户负责人：" prop="responsiblePersonIdList">
          <el-select
            v-model="queryParams.responsiblePersonIdList"
            placeholder="请选择"
            multiple
          >
            <el-option
              v-for="item in responsiblePersonList"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户来源：" prop="clientSource">
          <el-select v-model="queryParams.clientSource" placeholder="请选择">
            <el-option
              v-for="item in sourceList"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户级别：" prop="clientLevel">
          <el-select v-model="queryParams.clientLevel" placeholder="请选择">
            <el-option
              v-for="item in levelList"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="签约状态：" prop="signStatus">
          <el-select v-model="queryParams.signStatus" placeholder="请选择">
            <el-option
              v-for="item in signList"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务状态：" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择">
            <el-option
              v-for="item in serviceList"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="林客账号状态：" prop="tiktokLinkeStatus">
          <el-select
            v-model="queryParams.tiktokLinkeStatus"
            placeholder="请选择"
          >
            <el-option
              v-for="item in tiktokLinkeList"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门：" prop="deptName">
          <el-select v-model="queryParams.deptName" placeholder="请选择">
            <el-option
              v-for="item in deptNameList"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="timeType">
          <el-select v-model="queryParams.timeType" placeholder="请选择">
            <el-option
              v-for="item in timeTypeList"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-date-picker
            clearable
            v-model="date"
            type="daterange"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changeTime"
            placeholder="请选择"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery"
            >查询</el-button
          >
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="tabList"
        stripe
        border
        tooltip-effect="dark"
        style="width: 100%"
        @sort-change="sortChange"
      >
        <el-table-column
          label="序号"
          align="center"
          type="index"
          width="64px"
        />
        <el-table-column label="客户id" prop="id"></el-table-column>
        <el-table-column label="客户名称" prop="clientName"></el-table-column>
        <el-table-column label="客户来源" prop="sourceName"></el-table-column>
        <el-table-column
          label="客户类型"
          prop="clientTypeName"
        ></el-table-column>
        <el-table-column
          label="客户级别"
          prop="clientLevelName"
          width="130px"
          align="center"
        >
          <template slot-scope="{}" slot="header">
            <span>客户级别</span>
            <el-tooltip class="item" effect="dark" placement="top">
              <i class="el-icon-question tip_icon"></i>
              <div slot="content">
                <p>超头客户 支付GMV≥100万元</p>
                <p>头部客户 支付GMV≥50万元</p>
                <p>腰部客户 支付GMV≥10万元</p>
                <p>尾部客户 支付GMV&lt;10万元</p>
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          label="客户负责人"
          prop="responsiblePerson"
          width="100"
        ></el-table-column>
        <el-table-column
          label="签约状态"
          prop="signStatusStr"
        ></el-table-column>
        <el-table-column label="服务状态" prop="statusStr"></el-table-column>

        <el-table-column label="服务时间" prop="serviceTime"></el-table-column>
        <!-- <el-table-column label="服务类型" prop="serviceType"></el-table-column> -->
        <el-table-column
          label="服务佣金"
          prop="serviceCommission"
        ></el-table-column>
        <!-- <el-table-column label="客户状态" prop="statusStr"></el-table-column> -->
        <el-table-column label="直播场次" prop="liveNum"></el-table-column>
        <el-table-column
          label="短视频数量"
          prop="shortVideoNum"
        ></el-table-column>
        <el-table-column
          label="服务完成度"
          prop="completionRate"
          sortable="custom"
          width="120"
        ></el-table-column>
        <el-table-column
          label="抖音林客账号"
          prop="tiktokLinkeStatusStr"
        ></el-table-column>
        <el-table-column
          label="最后更新时间"
          prop="updateTime"
        ></el-table-column>

        <el-table-column label="创建时间" prop="createTime"></el-table-column>
        <el-table-column label="删除时间" prop="delTime"></el-table-column>

        <el-table-column
          label="操作"
          align="center"
          width="180"
          class-name="small-padding fixed-width"
          fixed="right"
        >
          <template slot-scope="scope">
            <!-- <el-button size="mini" type="text" @click="editClick(scope.row)" v-if="scope.row.status == 1">完善服务信息</el-button> -->
            <el-button size="mini" type="text" @click="lookClick(scope.row)"
              >查看</el-button
            >
            <!-- <el-button size="mini" type="text" @click="editClick(scope.row)"  v-if="scope.row.status != 1">编辑</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      ></pagination>
    </div>
    <Dialog
      v-bind="$attrs"
      v-if="dialogVisible"
      :id="id"
      :pathType="pathType"
      :visible.sync="dialogVisible"
      @success="_handleSuccess"
    >
    </Dialog>
  </div>
</template>
  
  <script>
import {
  getHistoryList,
  responsibleSelect,
  deptList,
} from "@/api/customer/customerFile";
import { userInfo } from "@/api/customer/reportingForm";
import { shopTypeTree } from "@/api/merchants";
import { getToken } from "@/utils/auth";
import Dialog from "./components/dialog";

import ExportExcelButton from "@/components/ExportExcelButton/index";

export default {
  name: "HistoryFile",
  components: {
    Dialog,
    ExportExcelButton,
  },
  data() {
    return {
      dialogId: "",
      dialogVisible: false,
      removeDialogVisible: false,
      // 遮罩层
      loading: false,
      // 导出遮罩层
      // 总条数
      total: 0,
      //表格数据
      tabList: [],
      pathType: "add",
      current: "",
      // 查询参数
      queryParams: {
        timeType: 1,
        pageNum: 1,
        pageSize: 10,
        keyword: "", //查询关键字
        responsiblePersonIdList: [], //客户负责人
        clientType: "", //客户类型 1 渠道运营商 2 大单店商户 3 连锁商户 bee_client_type
        industryType: "", //行业类型 1 餐厅 2 丽人 3 烘培 4 租车 5 商超 6 其他 bee_client_industry_type
        beginTime: "", //创建开始时间
        endTime: "", //创建结束时间
        clientSource: "", //客户来源 1 自开发 2 渠道商 3 其他 bee_client_source	q
        clientLevel: "", //客户级别 bee_client_level
        signStatus: "", //签约状态 bee_client_sign_status
        status: "", //服务状态 bee_client_status
        sort: "", //排序字段 1 服务完成度
        sortType: "", //排序类型 1 升序 2 降序
        tiktokLinkeStatus: "", //抖音林客账号状态
        deptName: "", //部门名称
      },
      date: [],
      industryList: [],
      clientList: [],
      responsiblePersonList: [],
      shopType: "",
      navList: [],
      timeTypeList: [
        { id: 1, value: "创建时间" },
        { id: 2, value: "最后更新时间" },
        { id: 3, value: "服务时间" },
        { id: 4, value: "删除时间" },
      ],
      sourceList: [{ id: "", value: "全部" }], //客户来源
      levelList: [{ id: "", value: "全部" }], //客户级别
      signList: [{ id: "", value: "全部" }], //签约状态
      serviceList: [{ id: "", value: "全部" }], //服务状态
      tiktokLinkeList: [{ id: "", value: "全部" }], //抖音林客账号状态
      imgList: [],
      deptNameList: ["全部"],
      ids: "",
      isDown: false,
      isResponsible: 1, //是否负责人 1 否 2 是
      hasAllPermission: "", //拥有全部客户权限 1 有 2 无
      hasPermission: "", //拥有客户档案导出权限 1 有 2 无
    };
  },
  computed: {
    ExportParams() {
      const params = {
        ids: this.ids,
      };
      return params;
    },
  },
  created() {
    this.getdept();
    this.getDict();
    this.getList()
    this.getresponsiblePersonList();
  },
  methods: {
    getdept() {
      deptList().then((res) => {
        this.deptNameList = this.deptNameList.concat(res.result);
      });
    },
    //获取状态字典
    getDict() {
      var dictType =
        "bee_client_industry_type,bee_client_type,bee_client_source,bee_client_level,bee_client_sign_status,bee_client_status,bee_client_tiktok_linke_status";
      this.$getSelectList(dictType)
        .then((res) => {
          this.industryList = res.result[0].dictList;
          this.clientList = res.result[1].dictList;
          this.sourceList = this.sourceList.concat(res.result[2].dictList);
          this.levelList = this.levelList.concat(res.result[3].dictList);
          this.signList = this.signList.concat(res.result[4].dictList);
          this.serviceList = this.serviceList.concat(res.result[5].dictList);
          this.tiktokLinkeList = this.tiktokLinkeList.concat(
            res.result[6].dictList
          );
        })
        .finally(() => {
          this.loading = false;
        });
      console.log("this.industryList", this.industryList);
    },

    //客户负责人下拉
    getresponsiblePersonList() {
      responsibleSelect()
        .then((res) => {
          this.responsiblePersonList = res.result;
        })
        .finally(() => {
          this.loading = false;
        });
      console.log("this.industryList", this.industryList);
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      getHistoryList(this.queryParams).then((response) => {
        response.result.records.forEach((item) => {
          for (var key in item) {
            if (item[key] === "") {
              item[key] = "-";
            }
          }
        });
        this.tabList = response.result.records;
        this.total = response.result.total;
        this.loading = false;
      });
    },
    handleChange(value) {
      let _this = this;
      console.log(value);
      if (value.length == 2) {
        _this.filter.shopType = value[1];
        _this.filter.shopTypeParent = value[0];
      } else {
        _this.filter.shopTypeParent = value[0];
        _this.filter.shopType = "";
      }
    },
    //处理时间
    changeTime(e) {
      this.queryParams.beginTime = e[0];
      this.queryParams.endTime = e[1];
    },
    // 表单重置
    reset() {
      this.date = [];
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      };
      this.resetForm("queryParams");
      this.handleQuery();
    },
    //新增
    addClick() {
      this.dialogVisible = true;
      this.pathType = "add";
    },
    //编辑
    editClick(row) {
      this.id = row.id;
      this.dialogVisible = true;
      this.pathType = "edit";
    },
    //查看
    lookClick(row) {
      // this.dialogVisible = true;
      // this.pathType = 'look'
      // this.id = row.id
      this.$router.push({
        path: "/customerFileDetail",
        query: {
          id: row.id,
          clientName: row.clientName,
          pathType: 'historyIndex'
        },
      });
    },
    sortChange({ column, prop, order }) {
      console.log("order", order);
      if (prop == "completionRate") {
        this.queryParams.sort = 1;
        if (order == "ascending") {
          this.queryParams.sortType = 1;
        } else if (order == "descending") {
          this.queryParams.sortType = 2;
        } else {
          this.queryParams.sortType = 2;
        }
      }
      this.getList();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;

      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm("queryForm");

      this.reset();
    },
    _handleSuccess(e) {
      //成功回调
      this.queryParams.sort = "";
      this.sortType = "";
      this.getList();
    },
  },
};
</script>
  <style  lang="scss" scoped>
.head {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 20px 0;
}

.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 20px;
  margin-top: 10px;
}

.listBox_head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  .navBox {
    display: flex;
    justify-content: flex-start;
    .navList {
      display: flex;
      flex-direction: column;
      margin-right: 40px;
      .txt {
        font-size: 18px;
        color: #333;
        font-weight: bold;
      }
      .xian {
        width: 70px;
        height: 6px;
        border-radius: 4px;
        background: #1890ff;
        margin-top: 6px;
      }
    }
  }
  .right {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
}

.img_box {
  width: 100px;
  height: 80px;
  border-radius: 4px;
}
</style>
    